<include file="Public/header"  />
<body onselectstart="return false" ng-app="myApp" ng-controller="myCtrl">
<style>
    td{
        padding:10px;
    }
    .table-list input{
        border:1px solid #cecece;
        border-radius: 3px;
        width:50px;
        text-align: center;
    }
    .table-list td span{
        display: inline-block;
        width:52px;
        text-align: center;
    }
    .table-list button{
        border:none;
        border-radius: 3px;
        text-align: center;
        background: #3ece67;
        padding: 3px 10px;
        color:#fff;
        cursor:pointer;
    }
</style>
<div class="main">
    <div class="content">
        <div class="head-content">
            <div class="head-title">寄件价格列表</div>
            <div class="head-search">
                <a href="javascript:void(0)" onclick="addTemplate()" class="form-button color-bg-yellow" >添加</a>
            </div>
        </div>
    </div>
    <div class="content">
        <div class="head-content">
            <form action="<{:U('index')}>" method='get'>
                <div class="head-search">
                    <select class="form-input-small"  name="template_name" >
                        <option value="">选择模板</option>
                        <foreach name="template_name_list" item="vo" >
                            <option <{:$vo['template_name'] == I('get.template_name') ? "selected" : ''}> value="<{$vo['template_name']}>"><{$vo['template_name']}></option>
                        </foreach>
                    </select>
                    <input class="form-input-small" type="text" value="<{:I('get.name')}>" name='name' placeholder="目的地" />
                    <button class="form-button color-bg-green">搜索</button>
                </div>
            </form>
        </div>
    </div>
    <div class="table-list">
        <table cellpadding="0" cellspacing="0">
            <thead>
            <tr>
                <th>省份</th>
                <th>限重(kg)</th>
                <th>价格(元)</th>
                <th>超重价格(元/kg)</th>
                <th>价格模板</th>
                <th style="width:200px;">操作</th>
            </tr>
            </thead>
            <tbody>
                <tr ng-repeat="vo in list track by $index" ng-init="disable=true;">
                    <td ng-bind="vo['province']['name']"></td>
                    <td>
                        <span ng-show="disable" ng-bind="vo['range']"></span>
                        <input ng-show="!disable" type="text" ng-init="range=vo['range']" ng-model="range"/>
                    </td>
                    <td>
                        <span ng-show="disable" ng-bind="vo['price']"></span>
                        <input ng-show="!disable" type="text" ng-init="price=vo['price']" ng-model="price"/>
                    </td>
                    <td>
                        <span ng-show="disable" ng-bind="vo['excess_price']"></span>
                        <input ng-show="!disable" type="text" ng-init="excess_price=vo['excess_price']" ng-model="excess_price"/>
                    </td>
                    <td ng-bind="vo['template_name']"></td>
                    <td>
                        <button ng-show="!disable" ng-click="disable=!disable;range=vo['range'];price=vo['price'];excess_price=vo['excess_price'];">取消</button>
                        <button ng-show="disable" ng-click="disable=!disable">编辑</button>
                        <button ng-show="!disable" ng-click="disable=save($index,range,price,excess_price);">保存</button>
                    </td>
                </tr>
            </tbody>
        </table>

        <!--没有结果时显示-->
        <if condition="!$list" >
            <div class="nodata"><i class="iconfont">&#xe607;</i><span>没有查询到符合条件的记录</span></div>
        </if>

        <!--分页效果-->
        <div class="table-foot">
            <div class="foot-page">
                <ul><{$page}></ul>
            </div>
        </div>

    </div>
</div>

<include file="Public/footer" />
<script src="__PUBLIC__/Home/js/angular.js"></script>
<script>
    var myapp=angular.module("myApp",[]);
    myapp.controller("myCtrl",function($scope){
        $scope.list=<{$list}>;
        $scope.save=function(index,range,price,excess_price){
                var info={
                    "id":$scope.list[index]['id'],
                    "range":range,
                    "price":price,
                    "excess_price":excess_price
                };
                var isChange=true;
                $.ajax({
                    type:"post",
                    url:'<{:U("Price/save")}>',
                    data:info,
                    success:function(res){
                        if(res.status==1){
                            isChange=false;
                        $scope.$apply(function(){
                            $scope.list[index]['range']=range;
                            $scope.list[index]['price']=price;
                            $scope.list[index]['excess_price']=excess_price;
                        })
                    }
                }
            });
            return isChange;
        };
    });
</script>

<script>
    function addTemplate()
    {
        layer.prompt({title: '输入新建模板名称', formType: 3}, function(name, index){
            layer.close(index);
            $.post(
                    "<{:U('setName')}>",
                    {
                        name:name
                    },function(res){
                        if(res.status == 1){
                            layer.msg(res.info);
                            template_name = name;
                            setTimeout("location.href = '<{:U('index')}>?template_name='+template_name",1000);
                        }else{
                            layer.msg(res.info,{time:1000});
                        }
                    }
            );
        });
    }
</script>

</body>
</html>